<template>
  <div>
    <div class="top-cover" >
     
      <van-row
        v-if="logged"
        type="flex"
        justify="space-between"
        align="center"
        gutter="20"
        class="user-info"
      >
        <van-col style="flex: 1; min-width: 0">
          <van-row
            type="flex"
            align="center"
          >
            <van-col>
              <van-image
                class="avatar"
                width="60"
                :src="userInfo.avatar"
              ></van-image>
            </van-col>
            <van-col style="flex: 1; min-width: 0">
              <div class="user-nickname">{{ userInfo.user_nickname }}</div>
              <div class="user-account">{{ userInfo.signature }}</div>
              <div v-if="BUY_PACKAGE" class="user-tip">
                <template v-if="userInfo.vip_deadline > 0">
                  {{ `${$t('tip1')}：${ format(userInfo.vip_deadline, '{y}-{m}-{d}') }` }}
                </template>
                <template v-else>
                  {{ $t('tip2') }}
                </template>
              </div>
            </van-col>
          </van-row>
        </van-col>
        <van-col>
          <div
            v-if="hasCDKey"
            class="user-links"
            @click="$refs.cdkey.showCodePop = true"
          >
            <van-icon name="coupon-o" />
            {{ $t('cdkey') }}
          </div>
        </van-col>
      </van-row>
      <van-row
        v-else
        class="user-info"
        type="flex"
        align="center"
        @click="$router.push('/sign/login')"
      >
        <van-col>
          <van-icon
            class="avatar"
            name="user-circle-o"
            size="60"
          />
        </van-col>
        <van-col>
          <div class="user-nickname">{{ $t('pageUser.login') }}</div>
          <div class="user-account">{{ $t('pageUser.welcome') }}</div>
        </van-col>
      </van-row>
    </div>
    <div class="zi">
        <div class="zitop">
          <p style="display:flex">
            
            <img style="width: 50px;" src="../../assets/jb/suo.png" alt="">
            
          </p>
          <p style="color:#fff;font-size:12px">USDT 资产</p>
          <!-- <img style="width:20px" src="../../assets/jb/yan.png" alt=""> -->
        </div>
        <p class="zibo" @click="handleLink('/wallet?symbol=USDT')"> {{ userInfo.usdt_balance|numberFormat(4) }} <span style="font-size:13px;margin-left:5px"> USDT</span></p>
    </div>
    <div class="zibox">
      <div class="zibox1" style="border-bottom:solid 1px #efefef"
         @click="handleLink('/user/invite/poster')"
      >
          <img src="../../assets/jb/fen.png" alt="">
         
      </div>
      <div class="zibox2" style="border-bottom:solid 1px #efefef"
        @click="handleLink('/user/caleandar')"
      >
          <img src="../../assets/jb/jiao.png" alt="">
         
      </div>
      <div class="zibox1" style="border-bottom:solid 1px #efefef"
          @click="handleLink('/user/invite')"
      >
          <img src="../../assets/jb/she.png" alt="">
         
      </div>
      <div class="zibox1"
        @click="handleLink('/user/settings')"
      >
          <img src="../../assets/jb/guan.png" alt="">
        
      </div>
      <div class="zibox2"
        @click="handleLink('/user/settings/save')"
      >
          <img src="../../assets/jb/zhang.png" alt="">
        
      </div>
      <div class="zibox1"
        @click="goHelp()"
      >
          <img src="../../assets/jb/lian.png" alt="">
         
      </div>
    </div>

     
    <activation-popup ref="cdkey" />
  </div>
</template>

<script>
import { mapState,mapActions} from 'vuex'
import ActivationPopup from './activation/ActivationPopup'
import { format } from '@/utils/time'
import { BUY_PACKAGE, CHEKC_CDKEY } from '@/config/index'

export default {
  layout: 'navigation',
  i18n: {
    messages: {
      zh: {
        contact: '联系我们',
        language: '选择语言',
        tip1: '您的vip身份到期时间为',
        tip2: '您的vip身份已到期！'
      },
      en: {
        contact: 'Contact Us',
        language: 'Change Language',
        tip1: 'Your VIP status expires at',
        tip2: 'Your vip status has expired!'
      }
    }
  },
  components: {
    ActivationPopup
  },
  data () {
    return {
      BUY_PACKAGE,
      hasCDKey: CHEKC_CDKEY,
      activationCode: ''

    }
  },
  computed: {
    ...mapState({
      logged: ({ user }) => user.logged,
      userInfo: ({ user }) => user.userInfo,
      initInfo: index => index.initInfo,
      thirdLoginEnabled: ({ thirdLoginEnabled }) => thirdLoginEnabled
    })
  },
  async created(){
    if(localStorage.getItem('USER_TOKEN')){
       await this.getUserInfo();
    }
  },
  methods: {
    ...mapActions({
      getUserInfo: 'user/getUserInfo'
    }),
    startCallBack () {
      this.$refs.LuckyWheel.play()
      setTimeout(() => {
        this.$refs.LuckyWheel.stop(Math.random() * 8 >> 0)
      }, 1000)
    },
    format,
    handleLink (path) {
      if (this.logged) {
        this.$router.push(path)
      } else {
        this.$router.push('/sign/login')
      }
    },
    goAbout() {
      this.$router.push({
        name: 'common-article',
        params: {
          url: this.initInfo.system_user_agreement,
          title: '服务协议'
        }
      })
    },
    game() {
      this.$router.push('/user/game')
    },
    goHelp() {
      this.$router.push({
        name: 'common-article',
        params: {
          url: this.initInfo.system_customer_service,
          title: '联系我们'
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.zi{
    width: 91%;
    height: 113px;
    border-radius: 10px;
    background: #02A488;
    margin-left: 20px;
    margin-top: -73px;
    overflow:hidden
}
.zitop{
  width:100%;
  height:50px;
  display:flex;
  align-items: center;
  // justify-content: space-between;
    padding: 10px 22px;
    margin-top:10px
}
.zibo{
  display: flex;
    color: #fff;
    font-size: 26px;
    margin-top: 9px;
    padding: 0 22px;
    align-items: center;
}
.top-cover {
  background-color: #e2f6f1;
  height: 200px;
    padding-top: 23px;
    border-radius: 0 0 30px 30px;
}
.zibox{
 width: 96%;
    height: 202px;
    border-top: solid 1px #efefef;
    border-bottom: solid 1px #efefef;
    display: flex;
    flex-wrap: wrap;
    margin-top: 35px;
    margin-left: 2%;
}
.zibox1{
  width:33%;
  height:100px;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.zibox2{
  width:33%;
  height:100px;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right:solid 1px #efefef;
  border-left:solid 1px #efefef;
  
}
.zibox1 img{
 width:60px
}
.zibox2 img{
 width:60px
}
.page{
  background: #fff;
    height: 100vh;
    margin:0
}
.page-header {
  height: 46px;
  padding: 0 15px;
  margin-bottom: 20px;
  &-right .van-icon {
    display: inline-block;
    vertical-align: middle;
  }
  &-title {
    display: flex;
    align-items: center;
    font-size: 22px;
    line-height: 1;
    color: #333333;
  }
}
.van-cell-group {
  margin-top: 10px;
}
.user-info {
  padding: 15px;
  font-size: 14px;
  line-height: 1;
  .avatar {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    overflow: hidden;
  }
}
.user-nickname {
  font-size: 18px;
  font-weight: 500;
}
.user-account {
  margin-top: 6px;
}
.user-tip {
  font-size: 12px;
  margin-top: 5px
}
.user-links {
  text-align: center;
  font-size: 12px;
  .van-icon {
    font-size: 18px;
    display: block;
    margin-bottom: 5px;
  }
}
/deep/ .van-dialog__content {
  padding: 30px 15px;
  .van-cell-group {
    margin-top: 0;
  }
}
</style>
